<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-05-18 14:23:47
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-08 17:20:06
 * @FilePath: \nien-vue3-admin\src\views\finance\FinancialManagementTools\accountMaintain\index.vue
 * @Description: 客户开票信息管理
-->
<template>
  <custom-container ref="customContainerRef" :config="config" />
  <!-- 新增\编辑 弹窗 -->
  <edit-dialog ref="editDialogRef" @success="refReshList" />
  <import-dialog ref="importDialogRef" @success="refReshList" />
</template>

<script setup lang="ts">
import { ref, reactive, computed, defineAsyncComponent } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { EditPen, Delete, Plus, Upload } from '@element-plus/icons-vue'
import { DictDirection } from '@/store/modules/dicts'
import { collectionTicketingInfoList, deleteInfo } from '@/api/finance/FinancialManagementTools'

const EditDialog = defineAsyncComponent(() => import('./components/EditDialog.vue'))
const ImportDialog = defineAsyncComponent(() => import('./components/ImportDialog.vue'))
const customContainerRef = ref(null)
const multipleSelection = ref([])
const editDialogRef = ref(null)
const importDialogRef = ref(null)
const queryParams = reactive({
  pageSize: 10,
  pageNum: 1,
  customerCode: undefined,
  identificationNo: undefined,
})
/**
 * @description: 刷新列表
*/
const refReshList = () => {
  customContainerRef.value.getList()
}
const delInfo = (ids) => {
  deleteInfo(ids).then(res => {
    if (res.code === 200) {
      ElMessage.success('删除成功！')
      refReshList()
    }
  })
}
const config = computed({
  get() {
    return {
      query: {
        fields: [
          {
            type: 'select',
            label: '客户名称',
            prop: 'customerCode',
            option: {
              clearable: true,
              dictInfo: { dict: DictDirection.客户 },
            },
          },
          {
            label: '纳税人识别号',
            prop: 'identificationNo',
          },
        ],
        queryParams,
        formOption: {
          labelWidth: 100,
        },
      },
      btns: [
        {
          title: '新增',
          type: 'primary',
          icon: Plus,
          onClick: (e) => {
            editDialogRef.value.open('新增')
          },
        },
        {
          title: '导入',
          type: 'danger',
          icon: Upload,
          onClick(e) {
            importDialogRef.value.visible = true
          },
        },
        {
          title: '删除',
          type: 'danger',
          disabled: !multipleSelection.value.length,
          icon: Delete,
          onClick(e) {
            const ids = multipleSelection.value.map(i => i.id).join(',')
            delInfo(ids)
          },
        },
      ],
      table: {
        columns: [
          { type: 'selection', width: '55' },
          { label: '标识符', align: 'center', prop: 'id' },
          { label: '客户名称',
            align: 'center',
            prop: 'customerCode',
            autoFormatter: {
              dict: DictDirection.客户,
              rowKey: 'customerCode',
            } },
          { label: '纳税人识别号', align: 'center', prop: 'identificationNo' },
          { label: '地址及电话', align: 'center', prop: 'addressAndTelephoneNo' },
          { label: '开户行及账号', align: 'center', prop: 'bankAccountNo' },
          { label: '邮箱', align: 'center', prop: 'mail' },
          { label: '备注', align: 'center', prop: 'remarks' },
          {
            label: '操作',
            align: 'center',
            width: '200',
            fixed: 'right',
            render(h, params) {
              return [
                h(
                  ElButton,
                  {
                    text: true,
                    type: 'primary',
                    icon: EditPen,
                    onClick: () => {
                      editDialogRef.value.open('修改', params.row)
                    },
                  },
                  {
                    default: () => '修改',
                  },
                ), 
                h(
                  ElButton,
                  {
                    text: true,
                    type: 'primary',
                    icon: Delete,
                    onClick: () => {
                      delInfo(params.row.id)
                    },
                  },
                  {
                    default: () => '删除',
                  },
                )]
            },
          },
        ],
        event: {
          onSelectionChange: (rows) => {
            multipleSelection.value = rows
          },
        },
      },
      api: collectionTicketingInfoList,
    }
  },
  set(val) {
    return val
  },
})

</script>